
import { useState } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Progress } from "@/components/ui/progress";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { 
  ChevronDown, 
  ChevronUp, 
  Brain, 
  Users, 
  Target, 
  BookOpen,
  Trophy,
  Calendar,
  ExternalLink,
  RotateCcw
} from "lucide-react";
import { TeachingPhilosophyAssessment } from "./TeachingPhilosophyAssessment";
import { StrengthsDiscoveryAssessment } from "./StrengthsDiscoveryAssessment";
import { InterestExplorerAssessment } from "./InterestExplorerAssessment";

interface AssessmentResult {
  id: string;
  title: string;
  status: 'completed' | 'not-started';
  completedDate?: string;
  result?: string;
  description?: string;
}

const initialResults: AssessmentResult[] = [
  {
    id: "teaching-philosophy",
    title: "Teaching Philosophy Profile",
    status: "completed",
    completedDate: "April 25, 2025",
    result: "Constructivist Educator",
    description: "You facilitate discovery-based learning and encourage student exploration"
  },
  {
    id: "strengths-discovery", 
    title: "Strengths Discovery",
    status: "completed",
    completedDate: "April 22, 2025",
    result: "Creative Facilitator",
    description: "Your strengths lie in visual communication and collaborative leadership"
  },
  {
    id: "interest-explorer",
    title: "Interest Explorer",
    status: "completed", 
    completedDate: "April 20, 2025",
    result: "Social-Investigative Profile",
    description: "You're drawn to educational research and mentoring fellow educators"
  }
];

export function ProfessionalSelfDiscovery() {
  const [expandedCard, setExpandedCard] = useState<string | null>(null);
  const [assessmentResults, setAssessmentResults] = useState<AssessmentResult[]>(initialResults);

  const toggleCard = (cardId: string) => {
    setExpandedCard(expandedCard === cardId ? null : cardId);
  };

  const handleRetakeAssessment = (assessmentId: string) => {
    console.log(`Retaking assessment: ${assessmentId}`);
    // Reset assessment status and clear results
    setAssessmentResults(prev => 
      prev.map(result => 
        result.id === assessmentId 
          ? { ...result, status: 'not-started' as const, result: undefined, completedDate: undefined }
          : result
      )
    );
    setExpandedCard(assessmentId);
  };

  const handleAssessmentComplete = (assessmentId: string, result: string, description: string) => {
    const currentDate = new Date().toLocaleDateString('en-US', { 
      year: 'numeric', 
      month: 'long', 
      day: 'numeric' 
    });
    
    setAssessmentResults(prev => 
      prev.map(assessment => 
        assessment.id === assessmentId 
          ? { 
              ...assessment, 
              status: 'completed' as const, 
              result, 
              description,
              completedDate: currentDate 
            }
          : assessment
      )
    );
    setExpandedCard(null);
  };

  const completedCount = assessmentResults.filter(result => result.status === 'completed').length;
  const overallProgress = (completedCount / assessmentResults.length) * 100;

  return (
    <div className="space-y-6">
      {/* Header Section */}
      <Card className="bg-gradient-to-r from-blue-50 to-indigo-50 border-blue-200">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Brain className="w-5 h-5 text-primary" />
            Professional Self-Discovery
          </CardTitle>
          <CardDescription>
            Help educators explore their teaching philosophy, strengths, and career interests to support growth and alignment.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid md:grid-cols-2 gap-6">
            <div className="space-y-3">
              <div className="flex justify-between text-sm">
                <span className="font-medium">Overall Progress</span>
                <span className="font-semibold text-green-600">{Math.round(overallProgress)}%</span>
              </div>
              <Progress value={overallProgress} className="h-2" />
              <p className="text-sm text-muted-foreground">
                {completedCount} of {assessmentResults.length} assessments completed
              </p>
            </div>
            
            {completedCount === assessmentResults.length && (
              <div className="space-y-3">
                <div className="flex items-center gap-2">
                  <Trophy className="w-4 h-4 text-yellow-500" />
                  <h4 className="text-sm font-medium">Discovery Complete!</h4>
                </div>
                <p className="text-sm text-muted-foreground">
                  You've completed your professional self-discovery journey. Use these insights to guide your teaching development.
                </p>
              </div>
            )}
          </div>
        </CardContent>
      </Card>

      {/* Assessment Cards */}
      <div className="space-y-4">
        {/* Teaching Philosophy Profile */}
        <Card className="border-l-4 border-l-blue-500">
          <CardHeader className="cursor-pointer" onClick={() => toggleCard('teaching-philosophy')}>
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                <BookOpen className="w-5 h-5 text-blue-600" />
                <div>
                  <CardTitle className="text-lg">Teaching Philosophy Profile</CardTitle>
                  <CardDescription>
                    Discover your educational approach based on teaching theory
                  </CardDescription>
                </div>
              </div>
              <div className="flex items-center gap-3">
                {assessmentResults.find(r => r.id === 'teaching-philosophy')?.status === 'completed' && (
                  <Badge variant="default" className="bg-green-100 text-green-800">
                    Completed
                  </Badge>
                )}
                {expandedCard === 'teaching-philosophy' ? 
                  <ChevronUp className="w-5 h-5" /> : 
                  <ChevronDown className="w-5 h-5" />
                }
              </div>
            </div>
          </CardHeader>
          
          {expandedCard === 'teaching-philosophy' && (
            <CardContent className="border-t pt-6">
              <TeachingPhilosophyAssessment 
                onComplete={(result, description) => 
                  handleAssessmentComplete('teaching-philosophy', result, description)
                }
                currentResult={assessmentResults.find(r => r.id === 'teaching-philosophy')}
              />
            </CardContent>
          )}
          
          {assessmentResults.find(r => r.id === 'teaching-philosophy')?.status === 'completed' && 
           expandedCard !== 'teaching-philosophy' && (
            <CardContent className="pt-0">
              <div className="flex items-center justify-between">
                <div>
                  <div className="font-medium text-blue-600">
                    {assessmentResults.find(r => r.id === 'teaching-philosophy')?.result}
                  </div>
                  <div className="text-sm text-muted-foreground flex items-center gap-2 mt-1">
                    <Calendar className="w-4 h-4" />
                    Completed on: {assessmentResults.find(r => r.id === 'teaching-philosophy')?.completedDate}
                  </div>
                </div>
                <Button 
                  variant="outline" 
                  size="sm"
                  onClick={() => handleRetakeAssessment('teaching-philosophy')}
                >
                  <RotateCcw className="w-4 h-4 mr-1" />
                  Retake
                </Button>
              </div>
            </CardContent>
          )}
        </Card>

        {/* Strengths Discovery */}
        <Card className="border-l-4 border-l-purple-500">
          <CardHeader className="cursor-pointer" onClick={() => toggleCard('strengths-discovery')}>
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                <Target className="w-5 h-5 text-purple-600" />
                <div>
                  <CardTitle className="text-lg">Strengths Discovery</CardTitle>
                  <CardDescription>
                    Identify your teaching-related strengths and leadership potential
                  </CardDescription>
                </div>
              </div>
              <div className="flex items-center gap-3">
                {assessmentResults.find(r => r.id === 'strengths-discovery')?.status === 'completed' && (
                  <Badge variant="default" className="bg-green-100 text-green-800">
                    Completed
                  </Badge>
                )}
                {expandedCard === 'strengths-discovery' ? 
                  <ChevronUp className="w-5 h-5" /> : 
                  <ChevronDown className="w-5 h-5" />
                }
              </div>
            </div>
          </CardHeader>
          
          {expandedCard === 'strengths-discovery' && (
            <CardContent className="border-t pt-6">
              <StrengthsDiscoveryAssessment 
                onComplete={(result, description) => 
                  handleAssessmentComplete('strengths-discovery', result, description)
                }
                currentResult={assessmentResults.find(r => r.id === 'strengths-discovery')}
              />
            </CardContent>
          )}
          
          {assessmentResults.find(r => r.id === 'strengths-discovery')?.status === 'completed' && 
           expandedCard !== 'strengths-discovery' && (
            <CardContent className="pt-0">
              <div className="flex items-center justify-between">
                <div>
                  <div className="font-medium text-purple-600">
                    {assessmentResults.find(r => r.id === 'strengths-discovery')?.result}
                  </div>
                  <div className="text-sm text-muted-foreground flex items-center gap-2 mt-1">
                    <Calendar className="w-4 h-4" />
                    Completed on: {assessmentResults.find(r => r.id === 'strengths-discovery')?.completedDate}
                  </div>
                </div>
                <Button 
                  variant="outline" 
                  size="sm"
                  onClick={() => handleRetakeAssessment('strengths-discovery')}
                >
                  <RotateCcw className="w-4 h-4 mr-1" />
                  Retake
                </Button>
              </div>
            </CardContent>
          )}
        </Card>

        {/* Interest Explorer */}
        <Card className="border-l-4 border-l-orange-500">
          <CardHeader className="cursor-pointer" onClick={() => toggleCard('interest-explorer')}>
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                <Users className="w-5 h-5 text-orange-600" />
                <div>
                  <CardTitle className="text-lg">Interest Explorer</CardTitle>
                  <CardDescription>
                    RIASEC-based profiler to align with roles and development paths
                  </CardDescription>
                </div>
              </div>
              <div className="flex items-center gap-3">
                {assessmentResults.find(r => r.id === 'interest-explorer')?.status === 'completed' && (
                  <Badge variant="default" className="bg-green-100 text-green-800">
                    Completed
                  </Badge>
                )}
                {expandedCard === 'interest-explorer' ? 
                  <ChevronUp className="w-5 h-5" /> : 
                  <ChevronDown className="w-5 h-5" />
                }
              </div>
            </div>
          </CardHeader>
          
          {expandedCard === 'interest-explorer' && (
            <CardContent className="border-t pt-6">
              <InterestExplorerAssessment 
                onComplete={(result, description) => 
                  handleAssessmentComplete('interest-explorer', result, description)
                }
                currentResult={assessmentResults.find(r => r.id === 'interest-explorer')}
              />
            </CardContent>
          )}
          
          {assessmentResults.find(r => r.id === 'interest-explorer')?.status === 'completed' && 
           expandedCard !== 'interest-explorer' && (
            <CardContent className="pt-0">
              <div className="flex items-center justify-between">
                <div>
                  <div className="font-medium text-orange-600">
                    {assessmentResults.find(r => r.id === 'interest-explorer')?.result}
                  </div>
                  <div className="text-sm text-muted-foreground flex items-center gap-2 mt-1">
                    <Calendar className="w-4 h-4" />
                    Completed on: {assessmentResults.find(r => r.id === 'interest-explorer')?.completedDate}
                  </div>
                </div>
                <Button 
                  variant="outline" 
                  size="sm"
                  onClick={() => handleRetakeAssessment('interest-explorer')}
                >
                  <RotateCcw className="w-4 h-4 mr-1" />
                  Retake
                </Button>
              </div>
            </CardContent>
          )}
        </Card>
      </div>

      {/* Action Links */}
      {completedCount === assessmentResults.length && (
        <Card>
          <CardHeader>
            <CardTitle className="text-lg">Next Steps</CardTitle>
            <CardDescription>
              Apply your discoveries to enhance your teaching practice
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid md:grid-cols-2 gap-4">
              <Button variant="outline" className="justify-start">
                <ExternalLink className="w-4 h-4 mr-2" />
                Explore Smart Courseware Templates
              </Button>
              <Button variant="outline" className="justify-start">
                <Users className="w-4 h-4 mr-2" />
                Join Educator Communities
              </Button>
              <Button variant="outline" className="justify-start">
                <Target className="w-4 h-4 mr-2" />
                Set Professional Development Goals
              </Button>
              <Button variant="outline" className="justify-start">
                <BookOpen className="w-4 h-4 mr-2" />
                Access Personalized Resources
              </Button>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  );
}
